<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>用户管理</title>
    <#assign path="${springMacroRequestContext.getContextPath()}">
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
<!--    <link rel="stylesheet" href="../static/layui/css/layui.css">-->
  <style>
      /* .layui-bg-black {
          width: 240px;
      } */
      .layui-nav-item {
          margin-top: 10px;
      }
      .layui-nav-item p {
          padding: 0 20px;
      }
      .box{
          margin-bottom: 40px;
      }
      .box p {
        margin-top: 40px;
        margin-left: 20px;
      }
      .box a {
          color: white;
      }
      .box a:hover {
          color: darkgray;
      }
  </style>
</head>
<body class="layui-layout-body">
    <!-- 左边导航部分 -->
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <div class="box">
          <p>${Session.user.userName} &nbsp (<a href="/login_out">退出</a>)</p>
          <p>${Session.user.userTrueName},你好</p>
        </div>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="/user/user_view">用户管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="/book/book_view">图书管理</a>
        </li>
        <li class="layui-nav-item">
            <a href="/borrowing/borrowing_view">借阅记录</a>
        </li>
      </ul>
    </div>
  </div>
    <!-- 内容主体区域 -->
  <div class="layui-body">
    <!-- <div style="padding: 20px;">内容主体区域</div> -->
    <table class="layui-table" id="test" lay-filter="test" lay-data="{page:true, id:'test',toolbar: '#toolbarDemo'}">
      <thead>
      <tr>
        <th lay-data="{type: 'checkbox', fixed: 'left'}"></th>
        <th lay-data="{field:'userId', width:80, sort: true}">ID</th>
        <th lay-data="{field:'userName', width:180, sort: true}">用户名</th>
        <th lay-data="{field:'userPassword', width:180, sort: true}">用户密码</th>
        <th lay-data="{field:'userTrueName', width:180, sort: true}">用户真实姓名</th>
        <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
        <th lay-data="{field:'userCreateTime', width:220, sort: true}">注册时间</th>
        <th lay-data="{field:'userType', width:100, sort: true}">类型</th>
        <th lay-data="{fixed: 'right',toolbar: '#barDemo', width:160}">操作</th>
      </tr>
      </thead>
      <#list userList as userList>
      <tr>
        <td></td>
        <td>${userList.userId}</td>
        <td>${userList.userName}</td>
        <td>${userList.userPassword}</td>
        <td>${userList.userTrueName}</td>
        <td>${userList.sex}</td>
        <td>${(userList.userCreateTime)?string("yyyy-MM-dd HH:mm:ss")}</td>
        <td>
          <#if userList.userType == 0>
          管理员
          <#else>
          普通用户
          </#if>
        </td>
      </tr>
      </#list>
    </table>
  </div>
</div>

<script src="${path}/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
});
</script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">新建用户</button>
    <button class="layui-btn layui-btn-sm" lay-event="select">查询用户</button>
  </div>
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  layui.use('table', function(){
    var table = layui.table;

    //头工具栏事件
    table.on('toolbar(test)', function(obj){        //括号中的test是<table>中lay-filter的值
      var $ = layui.$
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
              //新建用户
        case  'add':
          layer.open({
            type: 2
            ,title:"新建用户"
            ,content: "/user/user_add"
            ,btn:["确定",["取消"]]
            ,area: ['400px','600px']
            ,cancel:function(index){
              // table.reload();
              layer.close(index);
            }
            ,yes: function(index,layero){
              //得到form表单元素
              let form = layero.find("iframe").contents().find("#ajaxForm");

              //表单元素检验
              //暂时未写

              //ajax请求，请求地址”/book/save“
              layer.close(index);//关闭弹出层
              $.ajax({
                type: "post",
                url: "/user/add",
                data: form.serialize(),
                dataType: "json",
                success: function (response) {
                  location.reload();
                }
              });
            }
          })
          break;
              //用户查询
        case  'select':
          layer.open({
            type: 2
            ,title:"查询用户"
            ,content: "/user/user_select_w"
            ,btn:["确定",["取消"]]
            ,area: ['400px','600px']
            ,cancel:function(index){
              // table.reload();
              layer.close(index);
            }
            ,yes: function(index,layero){
              //得到form表单元素
              let form = layero.find("iframe").contents().find("#ajaxForm");
              let data = form.serialize()
              location.href="/user/admin_select?"+data;


              //ajax请求，请求地址”/book/save“
          //     layer.close(index);//关闭弹出层
          //     $.ajax({
          //       type: "post",
          //       url: "/user/select",
          //       data: form.serialize(),
          //       dataType: "json",
          //       success: function (response) {
          //         tableId.reload();//table重新加载
          //       }
          //     });
            }
          })
          break;
              //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮');
          break;
      };
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){
      var $ = layui.$
      var data = obj.data;
      console.log(data);
      //console.log(obj)
      if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          //在数据库中实现删除
          $.ajax({
            type: "get",
            url: "/user/delete?userId="+data.userId,
            data: "",
            dataType: "json",
            success: function (response) {
              //刷新页面
              location.reload();
            }
          });
          // obj.del();
          layer.close(index);
        });
      } else if(obj.event === 'edit'){
        //在数据库中实现编辑
        layer.open({
          type: 2
          ,title:"编辑用户"
          ,content: "/user/user_edit?userId="+data.userId
          ,area: ['400px','600px']
          ,btn:["确定",["取消"]]
          ,cancel:function(index){
            // table.reload();
            layer.close(index);
          }
          ,yes: function(index,layero){
            //得到form表单元素
            let form = layero.find("iframe").contents().find("#ajaxForm");
            //ajax请求，请求地址”/category/update_view“
            layer.close(index);//关闭弹出层
            $.ajax({
              type: "post",
              url: "/user/update",
              data: form.serialize(),
              dataType: "json",
              success: function (response) {
                //刷新页面
                location.reload();
              }
            });
          }
        })
      }
    });
  });
</script>
</body>
</html>